I'm working on an Angular 6 application where I am having a textarea. On having an error, an asterisk sign should be displayed beside the textarea on the top-right corner. The issue I'm having is on resizing the textarea element, there is a gap between the textarea element and the asterisk sign. I think I need to dynamically give the width of the textarea to the asterisk. But, I am not able to to it by CSS or get a (resize) event on it. How to go about it? Any help will be appreciated.
Sample code is given below.
demo-file.html
<div class="col-6 fix-custom-width">
<label for="dataVal"><span>*</span>Data Value</label>
<textarea id="dataVal" placeholder="Max 20 Characters" tabindex="2" type="text" class="form-control resizable-textarea" formControlName="dataVal" [ngClass]="{'is-invalid': dataVal.errors && (dataVal.dirty || dataVal.touched || submitted)}" required></textarea>
<span *ngIf="dataVal.errors && (dataVal.dirty || dataVal.touched || submitted)" class="display-inline error-asterisk">*</span>
<div class="red-color" *ngIf="dataVal.errors && (dataVal.dirty || dataVal.touched) || submitted">
<p *ngIf="dataVal.errors && dataVal.errors.required>
Required
</p>
</div>
</div>
demo-file.css
.error-asterisk {
position: absolute;
right: 0px;
top: 30px;
color: $error-message-text-color;
}
.fix-custom-width {
max-width: 100%;
}
.resizable-textarea {
max-width: inherit;
resize: both;
}